<template>
	<view class="pageBox">
		<head-navbar :back="false">
			<view class="">本次更新</view>
		</head-navbar>
		<view class="progressBox" v-if="system=='android'">
			<u-circle-progress :active-color="$store.state.color.primary" :percent="per" width="300">
				<view class="u-progress-content">
					<view class="u-progress-dot"></view>
					<text class='u-progress-info'>{{per}}%</text>
				</view>
			</u-circle-progress>
		</view>
		<view class="versionBox">
			<view class="every">
				当前版本号:<text class="app">{{local}}</text>
			</view>
			<view class="every">
				更新版本号:<text class="update">{{update}}</text>
			</view>
		</view>
		<view class="tableBox">
			<u-table>
				<u-tr>
					<u-th width="30"></u-th>
					<u-th width="70">更新说明</u-th>
				</u-tr>
				<u-tr v-for="(item,index) in list" :key="index">
					<u-td width="30"><text class="type" :class="{add:item.type=='新增',repair:item.type=='修复',optimize:item.type=='优化'}">{{item.type}}</text></u-td>
					<u-td width="70">{{item.remark}}</u-td>
					
				</u-tr>
			</u-table>
		</view>
		<view class="btnBox">
			<u-button :loading="!flag" :disabled="!flag" @click="toUpdate" type="success" :style="{backgroundColor:$store.state.color.primary}" size="default" :ripple="true" class="custom-style">{{getBtnText}}</u-button>
		</view>
	</view>
</template>

<script>
	import {iphoneDownload} from "../../config/index.js";
	export default {
		data() {
			return {
				system:"",//手机系统
				local:"",//APP版本号
				update:"",//更新版本号
				url:"",//下载地址
				per:0,//下载进度
				list:[],//更新说明列表
				flag:true,//安卓按钮更新开关
			}
		},
		computed:{
			getBtnText(){
				if(this.system=='ios'){
					return '前往APP Store更新'
				}else if(this.system=='android'){
					return '点击更新'
				}
			},
		},
		onLoad() {
			this.init()
		},
		methods: {
			/**
			 * 初始化
			 */
			init(){
				let [system,local]=this.$store.state.appVersion.split('APP_')[1].split('_');
				let {Version,Download,UpdateApk,Remarks}=this.$store.state.updateInfo;
				this.system=system;
				this.local=local;
				this.update=Version;
				this.url=Download+UpdateApk
				Remarks.split(';').forEach((v)=>{
					this.list.push({
						type:v.replace(/^\n+|\n+$/g,"").split('|')[0],
						remark:v.replace(/^\n+|\n+$/g,"").split('|')[1],
					})
				})
			},
			/**
			 * 更新
			 */
			toUpdate(){
				if(this.system=='ios'){
					plus.runtime.openURL(iphoneDownload);
				}else if(this.system=='android'){
					this.flag=false;
					const downloadTask = uni.downloadFile({
						url: this.url,
						success: (res) => {
							if (res.statusCode === 200) {
								this.flag=true;
								console.log(res.tempFilePath)
								plus.runtime.install(
									res.tempFilePath, {
										force: false
									},
									(res)=>{
										console.log(res)
										plus.runtime.restart();
									},
									(err)=> {
										console.log(err)
										this.utils.toast(JSON.stringify(err));
					
									}
								);
							}
						}
					});
					
					downloadTask.onProgressUpdate((res) => {
						this.per = Math.round(res.totalBytesWritten * 100 / res.totalBytesExpectedToWrite)
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.u-progress-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #fb9126;
		}
		
		.u-progress-info {
			font-size: 28rpx;
			padding-left: 16rpx;
			letter-spacing: 2rpx
		}
	@import "./index.scss";
</style>
